<template>
  <div>
    <div class="app-container clearfix pageHeader">
      <div class="header fl">{{$route.meta.title}}</div>
    </div>
    <div
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
      class="app-container margin-content padding-content"
      style="overflow-y: auto;">

      <div class="graph-wrapper clearfix">
        <div class="area-content clearfix">
          <el-form
            :model="dataForm"
            ref="dataForm">
            <el-form-item label="所属码头" prop="portId">
              <treeselect
                placeholder="请选择"
                :options="options"
                :disable-branch-nodes="true"
                value-consists-of="LEAF_PRIORITY"
                :close-on-select="true"
                :open-on-click="true"
                v-model="dataForm.portId"
                @select="selectPortId"
                style="width: 300px;"/>
            </el-form-item>
          </el-form>
        </div>

        <div class="graph" :class="map" v-if="showFlag">
          <div class="graph-tips">
            <span class="tips-item is-exist">在用</span>
            <span class="tips-item is-full">已满</span>
            <span class="tips-item is-empty">吉区</span>
          </div>
          <el-popover
            ref="popover"
            placement="right"
            width="auto"
            trigger="hover"
            v-for="(item, index) in list" :key="index">

            <div class="graph-item">
              <span class="tit">{{item.areaCode}}区({{item.storeType | storeType}})</span>
              <div class="clearfix">
                <span class="text fl">{{item.ieFlag | ieFlagFilter}}</span>
                <span class="text fr">{{item.usedNum}}/{{item.storeNum}}</span>
              </div>
            </div>

            <div
              class="item"
              :class="[item.areaCode, {'is-empty': item.usedNum === '0', 'is-exist': item.usedNum > 0 && item.usedNum < item.storeNum, 'is-full': item.usedNum == item.storeNum}]"
              slot="reference"
              ref="graphList"
              @click="_detailByArea(item, index)"
              @mouseover="handleOver(index)"
              @mouseout="handleOut(index)">{{item.areaCode}}区-{{item.usedNum}}/{{item.storeNum}}
            </div>
          </el-popover>
        </div>

        <div class="no-data" v-else>暂无数据</div>

      </div>
    </div>
    <!-- 弹窗, 最新动态 -->
    <cont-dialog v-if="visible" ref="contDialog"></cont-dialog>
  </div>
</template>

<script>
  // api
  import { getPortTree } from '@/api/port'
  import { detailByPortId, detailByArea } from '@/api/storageYard'
  // utils
  import { modifyObj } from '@/utils/tools'
  import { addClass, removeClass, hasClassName } from '@/utils/dom'
  import { mapFilter } from '@/utils'
  import { portCodeDisabled } from '@/utils/selecterOptions'
  // vuex
  import { mapMutations, mapGetters } from 'vuex'
  // components
  import ContDialog from '@/components/ContDialog'
  import Divider from '@/components/Divider'
  import Treeselect from '@riophae/vue-treeselect'

  export default {
    name: 'el-graph',
    data() {
      return {
        loading: false,
        dataForm: {
          portId: null
        },
        list: [],
        options: [],
        visible: false,
        showFlag: false,
        map: '',
        portCodeDisabled
      }
    },
    computed: {
      ...mapGetters([
        'account'
      ])
    },
    watch: {
      'dataForm.portId'(newVal) {
        if (newVal === 26) {
          this.map = 'cont_map_sanshangang_mt'
          this.showFlag = true
        } else {
          this.map = ''
          this.showFlag = false
        }
      }
    },
    created() {
      this._getPortTree()
      this._detailByPortId()
    },
    methods: {
      _getPortTree() {
        getPortTree().then((res) => {
          this.options = modifyObj(res.data.data)
          this.dataForm.portId = this.options[0].id
        })
      },
      _detailByPortId() {
        this.loading = true
        detailByPortId(this.dataForm).then((res) => {
          if (res.data.data) {
            this.list = res.data.data
          } else {
            this.list = []
          }
          this.loading = false
        })
      },
      _detailByArea(item, index) {
        this.visible = true
        this.$nextTick(() => {
          this.setCurrentId(item.areaCode)
          this.$refs['contDialog'].init()
        })
      },
      handleOver(index) {
        addClass(this.$refs.graphList[index], 'active')
        // addClass(this.$refs.areaList[index], 'active')
        this.$refs.popover[index].showPopper = true
      },
      handleOut(index) {
        removeClass(this.$refs.graphList[index], 'active')
        // removeClass(this.$refs.areaList[index], 'active')
        this.$refs.popover[index].showPopper = false
      },
      selectPortId(node) {
        if (node.id === 26) {
          this.showFlag = true
          this.dataForm.portId = node.id
          this._detailByPortId()
        }
      },
      ...mapMutations({
        setCurrentId: 'SET_CURRENTID',
      })
    },
    components: {
      ContDialog,
      Divider,
      Treeselect
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" rel="stylesheet/scss" type="text/scss">
  .graph-wrapper {
    /*min-width: 1370px;*/
    background-color: #fff;
  }

  .area-content {
    font-size: 12px;

    .item {
      color: #999;
      min-width: 95px;
      border: 1px solid #ebeef5;
      border-radius: 4px;
      background-color: #fff;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
      padding: 8px;
      display: inline-block;
      cursor: pointer;
      transition: all .3s;

      &.active,
      &:hover {
        background-color: #2db7f5;
        color: #fff;
        .tit {
          color: #fff;
        }
      }
      span {
        display: block;
      }
      .tit {
        color: #333;
        font-weight: 400;
      }

      &:first-child {
        margin-right: 8px;
        margin-bottom: 8px;
      }

      & + .item {
        margin-right: 8px;
        margin-bottom: 8px;
      }
    }

    .no-data {
      width: 300px;
      padding: 24px 24px 1000px;
      margin-bottom: -1000px;
      background-color: #ccc;
      text-align: center;
      color: #666;
    }
  }

  .graph {
    position: relative;
    width: 1000px;
    background-color: #fff;
    background-repeat: no-repeat;
    background-size: cover;

    .graph-tips {
      position: absolute;
      right: 10px;
      font-size: 0;
      margin-left: 10px;
      margin-top: 32px;
      .tips-item {
        font-size: 12px;
        color: #fff;
        display: inline-block;
        padding: 6px 18px;
        border-radius: 4px;
        margin-right: 10px;

        &.is-empty {
          background-color: #dde3ea;
          color: #333;
        }
        &.is-exist {
          background-color: #10bbfe;
        }
        &.is-full {
          background-color: #fb7336;
        }
      }
    }

    .el-icon-picture-outline {
      font-size: 100px;
      line-height: 680px;
    }

    .graph-item {
      font-size: 12px;
      .tit {
        color: #333;
        font-weight: 400;
      }
      .text {
        color: #999;
      }
    }

    .item {
      transition: all .3s;

      &.is-empty {
        background-color: #dde3ea;
        color: #333;
      }
      &.is-exist {
        background-color: #10bbfe;
      }
      &.is-full {
        background-color: #fb7336;
      }
    }
  }

  .no-data {
    height: 580px;
    line-height: 580px;
    background-color: #ccc;
    text-align: center;
    color: #666;
  }

  .cont_map_rongqi_mt {
    height: 683px;
    background-image: url(../../img/cont_map_rongqi_mt.jpg);

    .NO, .F6, .F5, .F4, .F3, .F2, .F1, .F7, .A5, .A6, .A2, .A4, .A1, .A3, .T1, .B5, .B2, .B1, .B4, .B7, .B3, .B6, .B8, .T2, .T3, .T4, .T5, .T9, .T10, .T6, .H1, .H2, .H3 {
      position: absolute;
      background-color: #008000;
      font-size: 12px;
      text-align: center;
      cursor: pointer;
      color: #fff;
    }

    .NO {
      width: 41px;
      height: 54px;
      left: 49px;
      top: 215px;
    }

    .F6 {
      width: 59px;
      height: 24px;
      left: 190px;
      top: 174px;
    }

    .F5 {
      width: 41px;
      height: 20px;
      left: 312px;
      top: 166px;
    }

    .F4 {
      width: 15px;
      height: 23px;
      left: 474px;
      top: 157px;
    }

    .F3 {
      width: 40px;
      height: 20px;
      left: 561px;
      top: 147px;
    }

    .F2 {
      width: 41px;
      height: 19px;
      left: 705px;
      top: 147px;
    }

    .F1 {
      width: 31px;
      height: 17px;
      left: 840px;
      top: 156px;
    }

    .F7 {
      width: 104px;
      height: 18px;
      left: 193px;
      top: 272px;
    }

    .A5 {
      width: 122px;
      height: 50px;
      left: 344px;
      top: 282px;
    }

    .A6 {
      width: 112px;
      height: 40px;
      left: 348px;
      top: 349px;
    }

    .A2 {
      width: 205px;
      height: 37px;
      left: 491px;
      top: 278px;
    }

    .A4 {
      width: 204px;
      height: 38px;
      left: 492px;
      top: 348px;
    }

    .A1 {
      width: 186px;
      height: 38px;
      left: 715px;
      top: 278px;
    }

    .A3 {
      width: 183px;
      height: 39px;
      left: 717px;
      top: 348px;
    }

    .T1 {
      width: 11px;
      height: 28px;
      left: 327px;
      top: 467px;
    }

    .B5 {
      width: 46px;
      height: 42px;
      left: 389px;
      top: 423px;
    }

    .B2 {
      width: 39px;
      height: 142px;
      left: 502px;
      top: 425px;
    }

    .B1 {
      width: 33px;
      height: 141px;
      left: 550px;
      top: 426px;
    }

    .B4 {
      width: 111px;
      height: 75px;
      left: 191px;
      top: 495px;
    }

    .B7 {
      width: 48px;
      height: 80px;
      left: 442px;
      top: 544px;
    }

    .B3 {
      width: 95px;
      height: 26px;
      left: 522px;
      top: 615px;
    }

    .B6 {
      width: 48px;
      height: 34px;
      left: 375px;
      top: 607px;
    }

    .B8 {
      width: 18px;
      height: 27px;
      left: 784px;
      top: 436px;
    }

    .T2 {
      width: 21px;
      height: 24px;
      left: 300px;
      top: 300px;
    }

    .T3 {
      width: 21px;
      height: 26px;
      left: 300px;
      top: 341px;
    }

    .T4 {
      width: 21px;
      height: 37px;
      left: 300px;
      top: 385px;
    }

    .T5 {
      width: 45px;
      height: 20px;
      left: 341px;
      top: 445px;
    }

    .T9 {
      width: 45px;
      height: 16px;
      left: 214px;
      top: 421px;
    }

    .T10 {
      width: 42px;
      height: 17px;
      left: 258px;
      top: 421px;
    }

    .T6 {
      width: 12px;
      height: 26px;
      left: 326px;
      top: 494px;
    }

    .H1 {
      width: 49px;
      height: 12px;
      left: 651px;
      top: 420px;
    }

    .H2 {
      width: 56px;
      height: 13px;
      left: 727px;
      top: 420px;
    }

    .H3 {
      width: 10px;
      height: 29px;
      left: 716px;
      top: 463px;
    }
  }

  .cont_map_sanshangang_mt {
    height: 729px;
    background-image: url(../../img/cont_map_sanshangang_mt.jpg);

    .F1, .H1, .F2, .H2, .F3, .H3, .F4, .H4, .F5, .H5, .D1, .D2, .D3, .D4, .D5, .D6, .B0, .A0 {
      position: absolute;
      background-color: #008000;
      font-size: 12px;
      line-height: 15px;
      text-align: center;
      cursor: pointer;
      color: #fff;
    }

    .F1 {
      width: 144px;
      height: 16px;
      left: 279px;
      top: 255px;
    }
    .H1 {
      width: 211px;
      height: 15px;
      left: 439px;
      top: 256px;
    }
    .F2 {
      width: 143px;
      height: 15px;
      left: 280px;
      top: 278px;

    }
    .H2 {
      width: 211px;
      height: 15px;
      left: 439px;
      top: 278px;
    }
    .F3 {
      width: 143px;
      height: 14px;
      left: 280px;
      top: 302px;
    }
    .H3 {
      width: 212px;
      height: 16px;
      left: 439px;
      top: 301px;
    }
    .F4 {
      width: 143px;
      height: 15px;
      left: 280px;
      top: 323px;
    }
    .H4 {
      width: 182px;
      height: 16px;
      left: 439px;
      top: 322px;
    }
    .F5 {
      width: 144px;
      height: 16px;
      left: 279px;
      top: 346px;
    }
    .H5 {
      width: 182px;
      height: 16px;
      left: 439px;
      top: 346px;
    }
    .D1 {
      width: 105px;
      height: 15px;
      left: 668px;
      top: 256px;
    }
    .D2 {
      width: 104px;
      height: 15px;
      left: 668px;
      top: 278px;
    }
    .D3 {
      width: 106px;
      height: 15px;
      left: 667px;
      top: 301px;
    }
    .D4 {
      width: 107px;
      height: 16px;
      left: 667px;
      top: 322px;
    }
    .D5 {
      width: 105px;
      height: 16px;
      left: 668px;
      top: 346px;
    }
    .D6 {
      width: 105px;
      height: 15px;
      left: 668px;
      top: 373px;
    }
    .B0 {
      width: 28px;
      height: 128px;
      left: 812px;
      top: 257px;
    }
    .A0 {
      width: 23px;
      height: 26px;
      left: 855px;
      top: 258px;
    }

  }


</style>
